<template>
	<view class="select-active-item" v-for="(item,index) in localList" :key="item.id"
		@click.stop="todetail(item.id,ishome)">
		<view class="active_end" v-if="item.isEnded">
			已结束
		</view>
		<view class="active-header">
			<view class="active-bg" :style="{ backgroundImage: 'url(' +  baseurl+item.images[0] + ')' }">
				<view class="jl-tips">
					<image src="@/static/images/address.png" mode="widthFix"></image>
					<view class="jl-number">
						{{item.distance}}
					</view>
				</view>
			</view>
			<view class="active-info-item">
				<view class="active-info">
					<text class="active-title">
						<text class="active-type">
							{{item.type_text}}
						</text>
						{{item.title}}
					</text>
				</view>
				<view class="">
					<view class="active-total">
						{{item.after_apply_number}}人已报名 |
						<text class="few">还差{{item.apply_number - item.after_apply_number}}人</text>
					</view>
					<view class="activist-info">
						<view class="info">
							<image v-if="item.user_info.avatar!=''" :src="baseurl +'/'+ item.user_info.avatar"
								mode="aspectFill"></image>
							<image v-else src="@/static/images/avatar.png" mode="aspectFill"></image>
							<text class="activist-nickname">{{item.user_info.username}}</text>
						</view>
						<view class="love-info">
							<image src="/pages/user/static/images/no_love.png" mode="widthFix" v-if="item.like==0">
							</image>
							<image src="/pages/user/static/images/loves.png" mode="widthFix" v-else></image>
							<text class="total">{{item.like_count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="active-time">
			<image class="time-img" src="@/static/images/time.png" mode="aspectFill"></image>
			<view class="time">
				活动时间：{{convertTime(item.start_at, 'yyyy/MM/dd hh:mm')}}~{{convertTime(item.end_at, 'yyyy/MM/dd hh:mm')}}
			</view>
		</view>
		<view class="active-address">
			<view class="address">
				<image class="time-img" src="@/static/images/address_hui.png" mode="aspectFill"></image>
				<view class="time" style="display: flex;justify-content: space-between;">
					<view style="width: 77%;">
						<uv-text :lines="1" :customStyle="{fontSize:'24rpx',color: '#666666'}"
							:text="`集合地址：${item.address}`"></uv-text>
					</view>
					<view style="display: flex;" v-if="isReleasePage==false&&item.activity_money">

						 <uv-text :lines="1" :customStyle="{fontSize:'24rpx',color: 'red'}"
							:text="`￥${item.activity_money}`"></uv-text>
					</view>

				</view>
				<!-- <view class="" v-if="!item.isEnded">
					<view class="number" v-if="isApplyList==true">
						<text v-if="item.apply_status==1">去签到</text>
						<text v-if="item.apply_status==2">已签到</text>
						<text v-if="item.apply_status==3">去签到</text>
						<text v-if="item.apply_status==4">去签到</text> 
					</view>
				</view>
				<view class="" v-if="isApplyList==true">
					<view style="padding-left: 10rpx;display: flex;lign-items: center;"
						@click.stop="bindDelte(item.id,item.apply_id,index)">
						<uv-icon name="trash" color="#2979ff" size="50rpx"></uv-icon>
					</view>
				</view> -->
				<!-- <view class="number" v-if="isReleasePage==true" @click.stop="toEdit(item.id)">
					<text>编辑</text>
				</view> -->
			</view>
		</view>
		<view class="footer-btn" v-if="type=='user' ">
			<view class="cancel-btn" @click.stop="cancelActive(item)" v-if="item.status=='0'">
				取消活动
			</view>
			<view class="cancel-btn" @click.stop="delActive(item)" v-if="item.status=='1'">
				删除
			</view>
			<view class="edit-btn" @click.stop="toEdit(item.id)">
				编辑
			</view>
		</view>
		<!-- <view class="footer-btn" v-if="type=='usermaker' ">
			<view class="cancel-btn" @click.stop="cancelApplyAPI(item)" v-if="item.apply_status==1">
				取消报名
			</view>
			<view class="cancel-btn" v-if="item.apply_status==4">
				已取消
			</view>
			
			<view class="cancel-btn" @click.stop="todetail(item.id,ishome,fal)" v-if="item.apply_status==1">
				签到
			</view>
			<view class="cancel-btn" @click.stop="todetail(item.id,ishome)" v-if="item.apply_status==2">
				已签到
			</view>
			<view class="cancel-btn" @click.stop="bindDelte(item.id,item.apply_id,index)"  v-if="item.apply_status==2||item.apply_status==4">
				删除
			</view>
		</view> -->
		<view class="footer-btn" v-if="type=='usermaker' ">
			<view class="cancel-btn"  v-if="item.apply_status==1">
				查看活动
			</view>
			<view class="cancel-btn" v-if="item.apply_status==4">
				查看活动
			</view>
			
			<view class="cancel-btn" @click.stop="todetail(item.id,ishome,fal)" v-if="item.apply_status==1">
				签到
			</view>
			<view class="cancel-btn" @click.stop="todetail(item.id,ishome)" v-if="item.apply_status==2">
				已签到
			</view>
			<view class="cancel-btn" @click.stop="bindDelte(item.id,item.apply_id,index)"  v-if="item.apply_status==2||item.apply_status==4">
				删除
			</view>
		</view>
	</view>
	<!-- 取消报名 -->
	<uv-popup ref="checkRef" mode="center" :round="15" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				是否取消该活动报名？
			</view>
			<view class="tips1">
				取消活动后，已支付报名费原路返回
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="checkRef.close()">
					取消
				</view>
				<view class="confirm" @click.stop="trueCheckin">
					确定
				</view>
			</view>
		</view>
	</uv-popup>
	<!-- 取消活动 -->
	<uv-popup ref="cancelActiveRef" mode="center" :round="15" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				是否取消该活动？
			</view>
			<view class="tips1">
				取消活动后，已支付报名费原路返回
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="cancelActiveRef.close()">
					取消
				</view>
				<view class="confirm" @click.stop="trueCancelActive">
					确定
				</view>
			</view>
		</view>
	</uv-popup>
	<!-- 删除活动 -->
	<uv-popup ref="delRef" mode="center" :round="15" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				是否删除该活动？
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="delRef.close()">
					取消
				</view>
				<view class="confirm" @click.stop="subdelActive">
					确定
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	// import { onLoad } from "@dcloudio/uni-app"
	import {
		deleteApplyActivity,trueCancelApplyAPI
	} from "../api/active.js"
	import {
		ref,
		watch,
		defineEmits 
	} from 'vue';
	import {
		editActivityInfoAPI,
		editActivityAPI
	} from '@/api/user.js'
	import {
		convertTime
	} from "../utils/utils.js"
	import {trueCancelActiveAPI ,deleteActivityAPI,signActivityAPI} from '@/api/active'

	
	const cancelActiveRef = ref()
	const checkRef = ref()
	const delRef = ref()
	const itemInfo = ref({})
	const emit = defineEmits(['updateList','checkList']) 
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		ishome: {
			type: String,
			default: () => ''
		},
		type: {
			type: String,
			default: () => ''
		},
		baseurl: {
			type: String,
			default: () => uni.getStorageSync('baseUrl')
		},
		// 是否是我的报名页
		isApplyList: {
			type: Boolean,
			default: () => false
		},
		// 是否是我的发布页
		isReleasePage: {
			type: Boolean,
			default: () => false
		}
	})
	const fal=ref(true)
	// 创建一个本地副本
	const localList = ref([...props.list]);
	// 如果 props.list 更新，更新本地副本
	watch(() => props.list, (newList) => {
		localList.value = newList.map(item => ({
			...item, // 展开每个 item 对象
			isEnded: isTimeEnded(item.start_at, item.end_at) // 添加 isEnded 字段
		}));
	});
	const isTimeEnded = (startTime, endTime) => {
		// 将传入的时间字符串转换为 Date 对象
		const startDate = new Date(startTime);
		const endDate = new Date(endTime);
		const currentDate = new Date(); // 获取当前时间

		// 验证结束时间是否早于当前时间
		if (currentDate > endDate) {
			return true; // 已结束
		} else {
			return false; // 未结束
		}
	}
	const todetail = (activeId, ishome,fal) => {
		uni.navigateTo({
			url: '/pages/activeDetail/detail/index?activeId=' + activeId + '&ishome=' + ishome + '&flag=' +fal
		})
	}
	const toEdit = (id) => {
		editActivityInfoAPI({
			id: id
		}).then(res => {
			if(res.code==200){
				uni.navigateTo({
					url: '/pages/release/organize/index?id=' + id
				})
			}
		})
		
	}
	
	// 取消报名
	const cancelApplyAPI=(item)=>{
		// console.log(222,checkRef.value);
		checkRef.value.open()
		itemInfo.value = item
		
	}
	const trueCheckin=async()=>{
		
		let res=await trueCancelApplyAPI({user_activity_id:itemInfo.value.id,apply_id:itemInfo.value.user_id})
		if (res.code == 200) {
			uni.showToast({
				title: '取消报名成功',
				icon: 'none'
			})
			emit('checkList')
			}
		checkRef.value.close()
	}
	// 取消活动
	const trueCancelActive=async()=>{
		// console.log(222,itemInfo.value.id);
		let res=await trueCancelActiveAPI({user_activity_id:itemInfo.value.id})
		if (res.code == 200) {
			uni.showToast({
				title: '取消活动成功',
				icon: 'none'
			})
			emit('updateList')
			}
		cancelActiveRef.value.close()
	}
	// 删除活动
	const subdelActive =async (item) => {
		
		// console.log(222,itemInfo.value.id);
		let res=await deleteActivityAPI({user_activity_id:itemInfo.value.id})
		if (res.code == 200) {
			uni.showToast({
				title: '删除活动成功',
				icon: 'none'
			})
			emit('updateList')
			}
		delRef.value.close()
	}
	// 我的报名
	const bindDelte = (id, applyid, index) => {
		console.log(333,id, applyid, index);
		uni.showModal({
			title: '提示',
			content: '删除后无法恢复,是否确认?',
			success: function(res) {
				if (res.confirm) {
					DelteApi(id, applyid, index)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const DelteApi = (id, applyid, index) => {
		deleteApplyActivity({
			user_activity_id: id,
			apply_id: applyid
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				localList.value.splice(index, 1)
			}
		})
	}
	
	const delActive = (item) => {
		
		delRef.value.open()
		itemInfo.value = item
	}
	const cancelActive = (item) => {
	
		cancelActiveRef.value.open()
		itemInfo.value = item
	}
</script>

<style lang="scss" scoped>
	// 发布的活动
	.select-active-item {
		margin: auto auto 30rpx auto;
		padding: 24rpx;
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.03);
		border-radius: 24rpx;
		position: relative;
		overflow: hidden;

		.active_end {
			position: absolute;
			right: 0;
			top: 0;
			background: rgba(229, 229, 229, 0.5);
			padding: 8rpx 14rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FE3052;
			border-bottom-left-radius: 20rpx;
		}

		.active-header {
			display: flex;
			align-items: flex-start;

			.active-bg {
				position: relative;
				background-size: cover;
				background-position: center;
				width: 256rpx;
				height: 212rpx;
				border-radius: 20rpx;

				.jl-tips {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(0, 0, 0, 0.4);
					padding: 5rpx;
					border-radius: 22rpx;
					position: absolute;
					right: 10rpx;
					bottom: 15rpx;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.jl-number {
						margin-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}

			.active-info-item {
				height: 212rpx;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.active-info {
					display: flex;
					// height: 88rpx;

					.active-type {
						display: inline-block;
						// width: 72rpx;
						padding: 0 8rpx;
						line-height: 46rpx;
						height: 46rpx;
						text-align: center;
						background: #FFF1F3;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FE3052;
					}

					.active-title {
						width: 330rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-weight: 800;
						font-size: 32rpx;
						color: #222222;
					}
				}

				.active-total {
					padding: 20rpx 0;
					font-weight: 400;
					font-size: 24rpx;
					color: #222;

					.few {
						color: #FE3052;
					}
				}
			}

			.activist-info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info {
					display: flex;
					align-items: center;

					image {
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
					}

					.activist-nickname {
						margin-left: 12rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.love-info {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					.total {
						margin-left: 8rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FE3052;
					}
				}
			}
		}


		.active-time {
			display: flex;
			align-items: center;
			padding-top: 20rpx;

			.time-img {
				width: 26rpx;
				height: 26rpx;
			}

			.time {
				margin-left: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;

			}
		}

		.active-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.address {
				display: flex;
				align-items: center;
				width: 100%;

				.time-img {
					width: 26rpx;
					height: 26rpx;
				}

				.time {
					flex: 1;
					margin-left: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.number {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;

				text {
					// width: 166rpx;
					// height: 80rpx;
					background: #FE3052;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					text-align: center;
					color: #fff;
					padding: 6rpx 16rpx;
				}
			}
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cancel-btn {
				width: 308rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #FE3052;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #FE3052;
			}

			.edit-btn {
				width: 308rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #111111;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}
		}
	}

	.register-popup {
		padding: 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
		}

		.tips1 {
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}
</style>